﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface StepsCellTypeParam {
        DefaultValue: any;
        direction: string;
        activeIcon: Icon;
        activeColor: string;
        inactiveIcon: Icon;
        inactiveColor: string;
        finishIcon: Icon;
        options: any;
        bindingOptions: any;
        useBinding: boolean;
    }

    export class StepsCellType extends VantCellTypeBase<StepsCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;
            const option = {
                template: `
<van-steps
    :active="active"
    :direction="direction"
    :active-icon="activeIcon"
    :active-color="activeColor"
    :inactive-icon="inactiveIcon"
    :inactive-color="inactiveColor"
    :finish-icon="finishIcon"
>
    <van-step :key="key" v-for="({ key, title }, index) in stepsOptions">
        {{ title }}
    </van-step>
</van-steps>
`,
                data() {
                    return {
                        ...self.getDefaultData(),
                        ...cellType,
                        ...self.convertToCssColor(cellType),
                        activeIcon: "checked",
                        inactiveIcon: "",
                        finishIcon: ""
                    };
                },
                computed: {
                    stepsOptions({ useBinding, bindingOptions, options }) {
                        const stepsOptions = useBinding ? bindingOptions : options;
                        return self.isEmpty(stepsOptions) || !Array.isArray(stepsOptions)
                            ? []
                            : self.uniqueKeyCreator(stepsOptions, "value");
                    }
                },
                methods: {
                    getValue() {
                        return this.value;
                    },
                    setValue(value: any) {
                        this.value = value;
                        this.updateActive();
                    },
                    setBindingOptions(options) {
                        this.bindingOptions = options;
                        this.updateActive();
                    },
                    updateActive() {
                        // 这里认为字符串数字与数字等价，双等号不能去掉
                        // eslint-disable-next-line
                        const index = this.stepsOptions.findIndex(step => step.value == this.value);
                        if (index > -1) {
                            this.active = index;
                            return;
                        }
                        if (this.value || this.value === 0) {
                            this.active = this.stepsOptions.length;
                        } else {
                            this.active = -1;
                        }
                    }
                }
            };

            this.createVueApp(option);

            IconHelper.getIcon(cellType.activeIcon, icon => {
                this.vue.activeIcon = icon;
            });
            IconHelper.getIcon(cellType.inactiveIcon, icon => {
                this.vue.inactiveIcon = icon;
            });
            IconHelper.getIcon(cellType.finishIcon, icon => {
                this.vue.finishIcon = icon;
            });

            this.ReloadBindingItems();

            super.onPageLoaded(info);
        }

        private getDefaultData() {
            return {
                active: -1,
                value: null,
                useBinding: false,
                options: [],
                bindingOptions: [],
                DefaultValue: ""
            };
        }

        private convertToCssColor(cellType: StepsCellTypeParam): any {
            const result: any = {};
            result.activeColor = Forguncy.ConvertToCssColor(cellType.activeColor);
            result.inactiveColor = Forguncy.ConvertToCssColor(cellType.inactiveColor);
            return result;
        }

        public reload() {
            this.ReloadBindingItems();
        }

        public ReloadBindingItems() {
            const cellType = this.cellType;
            if (cellType.useBinding) {
                SupportDataSourceCellType.refreshData(this, cellType.bindingOptions, dataSource => this.setDataSource(dataSource));
            }
        }

        public setDataSource(dataSource) {
            return this.vue.setBindingOptions(dataSource);
        }

        public UpdateActiveIcon(activeIcon: Icon) {
            IconHelper.getIcon(activeIcon, icon => {
                this.vue.activeIcon = icon;
            });
        }

        public UpdateActiveColor(activeColor: string) {
            this.vue.activeColor = Forguncy.ConvertToCssColor(activeColor);
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Steps, Vant", VantCellTypes.StepsCellType);